<template>
  <!--头部navbar-->
  <div class="navbarBox">
    <div class="navbar_left" @click="onClickLeft">
      <svg class="zuojiantou1_icon" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou1"></use>
      </svg>
    </div>
    <div class="navbar_center">
      <span>宠物发布</span>
    </div>
  </div>
  <!--表单-->
  <div class="publish_from">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!--图片-->
        <van-field
          name="pet_images"
          label="上传图片"
          :rules="[{ required: true, message: '请至上传图片1~5张' }]"
        >
          <template #input>
            <van-uploader
              v-model="dataFrom.pet_images"
              multiple
              :max-count="1"
              :max-size="onOversize"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        <!--昵称-->
        <van-field
          v-model="dataFrom.pet_name"
          name="pet_name"
          label="昵称"
          placeholder="昵称"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写宠物昵称' }]"
        />
        <!--类别-->
        <van-field
          v-model="store.state.petFiltrate.kind"
          is-link
          name="category_id"
          label="类别"
          placeholder="类别"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写宠物类别' }]"
          @click="onHandleKind"
        />
        <!--品种-->
        <van-field
          v-model="dataFrom.pet_variety"
          name="pet_variety"
          label="种类"
          placeholder="种类"
          :rules="[{ required: true, message: '请填写宠物种类' }]"
        />
        <!--年龄-->
        <van-field
          v-model="dataFrom.pet_age"
          is-link
          name="pet_age"
          label="年龄"
          placeholder="年龄"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写宠物年龄' }]"
          @click="onHandleAge"
        />
        <!--性别-->
        <van-field name="pet_gender" label="性别">
          <template #input>
            <van-radio-group
              v-model="dataFrom.pet_gender"
              direction="horizontal"
            >
              <van-radio name="1">雄</van-radio>
              <van-radio name="2">雌</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!--地点-->
        <van-field
          v-model="dataFrom.pet_giveaddress"
          is-link
          name="pet_giveaddress"
          label="送养地址"
          placeholder="送养地址"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写送养地址' }]"
          @click="onHandleCity"
        />
        <!--是否注射疫苗-->
        <van-field name="pet_vaccin" label="是否注射疫苗">
          <template #input>
            <van-radio-group
              v-model="dataFrom.pet_vaccin"
              direction="horizontal"
            >
              <van-radio name="true">是</van-radio>
              <van-radio name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!--是否驱虫-->
        <van-field name="pet_Insect_repellent" label="是否驱虫">
          <template #input>
            <van-radio-group
              v-model="dataFrom.pet_Insect_repellent"
              direction="horizontal"
            >
              <van-radio name="true">是</van-radio>
              <van-radio name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!--是否绝育-->
        <van-field name="pet_sterilization" label="是否绝育">
          <template #input>
            <van-radio-group
              v-model="dataFrom.pet_sterilization"
              direction="horizontal"
            >
              <van-radio name="true">是</van-radio>
              <van-radio name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!--简介-->
        <van-field
          v-model="dataFrom.pet_intro"
          rows="2"
          autosize
          label="简介"
          type="textarea"
          maxlength="50"
          placeholder="请输入宠物详细信息~"
          show-word-limit
        />
      </van-cell-group>
      <!--发布-->
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          发布
        </van-button>
      </div>
    </van-form>
  </div>
  <!--年龄选择弹出框-->
  <PetPopup v-if="store.state.popup.isPopup" />
  <!--地址选择-->
  <PubCity areaTitle="宠物发布地址" v-if="store.state.user.isArea" />
</template>

<script>
import { ref, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import PetPopup from "@/views/petTable/component/PetPopup";
import PubCity from "@/views/Publish/PubCity";
import { postRelease, postUploadavatar } from "@/api/home";
import { Toast } from "vant";

export default {
  name: "PublishFrom",
  components: { PubCity, PetPopup },
  setup() {
    const dataFrom = ref({
      //图片
      pet_images: [],
      //名称
      pet_name: "",
      //类别
      category_id: "",
      //品种
      pet_variety: "",
      //年龄
      pet_age: "",
      //性别
      pet_gender: "1",
      //地址
      pet_giveaddress: "",
      //疫苗
      pet_vaccin: "true",
      //驱虫
      pet_Insect_repellent: "true",
      // 绝育
      pet_sterilization: "true",
      //简介
      pet_intro: "",
    });
    //返回的图片
    const imgValue = ref();
    const store = useStore();
    const { onClickLeft } = nvabarBack();
    const onSubmit = () => {
      const from = {
        user_id: store.state.user.profile.user_id,
        pet_images: imgValue.value,
        pet_name: dataFrom.value.pet_name,
        category_id: dataFrom.value.category_id,
        pet_variety: dataFrom.value.pet_variety,
        pet_age: dataFrom.value.pet_age,
        pet_gender: dataFrom.value.pet_gender,
        pet_giveaddress: dataFrom.value.pet_giveaddress,
        pet_vaccin: dataFrom.value.pet_vaccin,
        pet_Insect_repellent: dataFrom.value.pet_Insect_repellent,
        pet_sterilization: dataFrom.value.pet_sterilization,
        pet_intro: dataFrom.value.pet_intro,
      };
      // console.log(from);
      postRelease(from).then((res) => {
        if (res.status == 200) {
          Toast("发布成功");
          onClickLeft();
        }
      });
    };
    //图片上传
    const onOversize = (file) => {
      if (file.size / 1024 / 1024 > 1) {
        Toast("文件大小不能超过 1mb");
      }
      return file.size / 1024 / 1024 > 1;
    };
    const afterRead = (file) => {
      // console.log(file);
      // 此时可以自行将文件上传至服务器
      const fromdata = new FormData();
      fromdata.append("file", file.file);
      // console.log(file);
      postUploadavatar(fromdata).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          imgValue.value = res.data.filename;
        }
      });
    };
    //选择类别
    const onHandleKind = () => {
      let categoryArr = [];
      store.state.petFiltrate.category.forEach((item) => {
        categoryArr.push(item.pet_type);
      });
      store.commit("popup/handleIspoup");
      store.commit("popup/handlePopupKind", "kind");
      store.commit("popup/handleColumns", categoryArr);
      watchEffect(() => {
        dataFrom.value.category_id = store.state.petFiltrate.categoryId;
      });
    };
    //年龄选择
    const onHandleAge = () => {
      store.commit("popup/handleIspoup");
      store.commit("popup/handlePopupKind", "petAge");
      store.commit("popup/handleColumns", [
        "小一岁",
        "一岁",
        "小两岁",
        "两岁",
        "小三岁",
        "三岁",
        "三岁以上",
      ]);
      watchEffect(() => {
        dataFrom.value.pet_age = store.state.publishPet.age;
      });
    };
    //选择地点
    const onHandleCity = () => {
      // store.commit("area/handleIsArea");
      store.commit("user/handleIsArea");
      watchEffect(() => {
        dataFrom.value.pet_giveaddress = store.state.user.city;
      });
    };
    return {
      store,
      dataFrom,
      onClickLeft,
      onSubmit,
      onHandleKind,
      onHandleAge,
      onHandleCity,
      afterRead,
      onOversize,
    };
  },
};
//顶部导航
function nvabarBack() {
  const store = useStore();
  const router = useRouter();
  const onClickLeft = () => {
    //返回上一级路由
    router.push("/");
    //关闭筛选框的弹出框
    if (store.state.popup.isPopup) {
      store.commit("popup/handleIspoup");
    }
    //关闭城市选择弹出框及清空数据
    if (store.state.user.isArea) {
      // store.commit("area/handleIsArea");
      store.commit("user/handleIsArea");
    }
    store.commit("petFiltrate/handleKind", "");
    store.commit("popup/handleColumns", "全部");
    // store.commit("area/handleCity", "全部");
    store.commit("user/handleCity", null);
  };
  return { onClickLeft };
}
</script>

<style scoped lang="less">
.navbarBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #dfe5eb;
  .navbar_center {
    color: #5f7bb7;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 0.5rem;
    margin-left: 6rem;
  }
}
.publish_from {
  padding-top: 2.5rem;
}
.van-form .van-cell-group {
  margin: 0;
}
.van-button {
  background-color: aliceblue;
  color: sandybrown;
  font-size: 1.3rem;
  letter-spacing: 9px;
}
.navbar_left,
.navbar_center {
  display: flex;
  align-items: center;
}
.zuojiantou1_icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
